<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="cw" uri="/widget-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>表单校验</title>
		<cw:base></cw:base>
		<script type="text/javascript">
			function lengthValidate(v){
				if (v.length > 5){
					return "长度不能大于5";
				}
				return true;
			}
		</script>
		<style type="text/css">
			.gridSelect-caption {
				background-color: #D0DEF0;
			}
			
			.required{color:red}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<b> 1. 类型验证：多用于text标签，设置validateType属性来实现，具体包含email(邮箱), zipcode(邮编), idcard(身份证), url(URL地址), account(账号)</b>
			</li>
		</ul>
		<br />
		<ul>
			<li>
			<cw:form>
				<table>
					<tr>
						<td>邮箱：</td>
						<td><cw:text property="email" validateType="email" value="kiddy@sina" /></td>
						<td>邮政编码：</td>
						<td><cw:text property="zip" validateType="zipcode" value="20011" /></td>
						<td>身份证号码：</td>
						<td><cw:text property="idcard" validateType="idcard" value="310113196308270812" /></td>
						<td>URL：</td>
						<td><cw:text property="url" validateType="url" value="ww.163.com" /></td>
						<td>帐号：</td>
						<td><cw:text property="account" validateType="account" value="@@1%" /></td>
					</tr>
				</table>
			</cw:form>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<b> 2. 一般验证：如必填，长度，最大最小值校验等</b>
			</li>
		</ul>
		<hr>
		<ul>
			<li>
				<b> 3. 自定义验证：通过设置正则表达式或者方法校验</b>
			</li>
		</ul>
		<br>
		<ul>
			<li>
			<cw:form>
				<table>
					<tr>
						<td>登录名1：</td>
						<td>
							<cw:text property="loginName1" regex="/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/"
								regexText="只能输入5-20个以字母开头、可带数字、“_”、“.”的字串" value="张三" />
						</td>
						<td>登录名2：</td>
						<td>
							<cw:text property="loginName2" validator="lengthValidate" value="kiddy111" />
						</td>
					</tr>
				</table>
			</cw:form>
			</li>
		</ul>
		<cw:theme></cw:theme>
		<script type="text/javascript">
			Ext.onReady(function(){
				resetHeight("validateFrame");
			})
		
			function resetHeight(frame) {
				var ifm = parent.document.getElementById(frame);
				var obj = document.body;
				var oStyle = obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, false);
				var initHeight = parseInt(document.body.clientHeight+parseInt(oStyle["margin-top"])+parseInt(oStyle["margin-bottom"]));
				ifm.height = parseInt(initHeight);
			}
		</script>
	</body>
</html>
